<template>
  <div class="screenHeader">
    <div></div>
    <div class="title-text">
      供应链可视化大屏
    </div>
    <div class="current-time">{{time}}</div>
  </div>
</template>

<script>
import moment from "moment"
export default {
  name: "screenHeader",
  props: {},
  components: {},
  data() {
    return {
      time:"",
      timer:null
    };
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
    this.timer = setInterval(this.setTime, 1000);
  },
  beforeDestroy() {
    // 组件销毁前清除定时器
    clearInterval(this.timer);
  },
  methods: {
    setTime() {
        this.time = moment().format("YYYY-MM-DD HH:mm:ss");
    }
  },

};
</script>

<style lang="scss" scoped>
@import "../scss/common.scss";
.screenHeader{
  width:100%;
  height:px-to-rem(72px);
  color: red;
  font-size: 14px;
  display:flex;
  position:relative;
  background: url("../images/title-bg.png") no-repeat;
  background-size: 100% 100%;

  .title-text{
    position:absolute;
    left: 50%;
    top: 10px;
    transform: translate(-50%);
    color:#fff;
    font-size: px-to-rem(32px);
    font-family: "PangMenZhengDao";
    letter-spacing: 2px;
  }
  .current-time{
    position:absolute;
    right: px-to-rem(20px);
    bottom: px-to-rem(18px);
    color: rgba(255, 255, 255, 0.7);
    font-family: "e1234";
    font-size: px-to-rem(18px);
  }
}
</style>
